<template>
  <Head :title="category.name" />
  <ShopLayout>
    <div class="bg-gray-100 min-h-screen">
      <div class="max-w-7xl mx-auto px-8 sm:px-16 lg:px-24 py-12">
        <!-- 分类标题 -->
        <div class="border-b border-gray-200 pb-10">
          <h1 class="text-4xl font-bold tracking-tight text-gray-900">{{ category.name }}</h1>
          <p v-if="category.description" class="mt-4 text-base text-gray-500">
            {{ category.description }}
          </p>
        </div>

        <!-- 产品列表 -->
        <div class="pt-12 lg:grid lg:grid-cols-3 lg:gap-x-8 xl:grid-cols-4">
          <!-- 筛选器（侧边栏） -->
          <aside>
            <h2 class="sr-only">筛选器</h2>

            <div class="hidden lg:block">
              <div class="space-y-10 divide-y divide-gray-200">
                <!-- 价格筛选 -->
                <div class="pt-10 first:pt-0">
                  <fieldset>
                    <legend class="block text-sm font-medium text-gray-900">价格区间</legend>
                    <div class="space-y-3 pt-6">
                      <div class="flex items-center">
                        <input
                          id="price-0"
                          v-model="priceRange"
                          value="all"
                          type="radio"
                          class="h-4 w-4 border-gray-300 text-gray-900 focus:ring-gray-900"
                        />
                        <label for="price-0" class="ml-3 text-sm text-gray-600">全部</label>
                      </div>
                      <div class="flex items-center">
                        <input
                          id="price-1"
                          v-model="priceRange"
                          value="0-1000"
                          type="radio"
                          class="h-4 w-4 border-gray-300 text-gray-900 focus:ring-gray-900"
                        />
                        <label for="price-1" class="ml-3 text-sm text-gray-600">¥0 - ¥1,000</label>
                      </div>
                      <div class="flex items-center">
                        <input
                          id="price-2"
                          v-model="priceRange"
                          value="1000-5000"
                          type="radio"
                          class="h-4 w-4 border-gray-300 text-gray-900 focus:ring-gray-900"
                        />
                        <label for="price-2" class="ml-3 text-sm text-gray-600">¥1,000 - ¥5,000</label>
                      </div>
                      <div class="flex items-center">
                        <input
                          id="price-3"
                          v-model="priceRange"
                          value="5000-10000"
                          type="radio"
                          class="h-4 w-4 border-gray-300 text-gray-900 focus:ring-gray-900"
                        />
                        <label for="price-3" class="ml-3 text-sm text-gray-600">¥5,000 - ¥10,000</label>
                      </div>
                      <div class="flex items-center">
                        <input
                          id="price-4"
                          v-model="priceRange"
                          value="10000-"
                          type="radio"
                          class="h-4 w-4 border-gray-300 text-gray-900 focus:ring-gray-900"
                        />
                        <label for="price-4" class="ml-3 text-sm text-gray-600">¥10,000 以上</label>
                      </div>
                    </div>
                  </fieldset>
                </div>

                <!-- 排序 -->
                <div class="pt-10">
                  <fieldset>
                    <legend class="block text-sm font-medium text-gray-900">排序方式</legend>
                    <div class="space-y-3 pt-6">
                      <div class="flex items-center">
                        <input
                          id="sort-0"
                          v-model="sortBy"
                          value="default"
                          type="radio"
                          class="h-4 w-4 border-gray-300 text-gray-900 focus:ring-gray-900"
                        />
                        <label for="sort-0" class="ml-3 text-sm text-gray-600">默认排序</label>
                      </div>
                      <div class="flex items-center">
                        <input
                          id="sort-1"
                          v-model="sortBy"
                          value="price-asc"
                          type="radio"
                          class="h-4 w-4 border-gray-300 text-gray-900 focus:ring-gray-900"
                        />
                        <label for="sort-1" class="ml-3 text-sm text-gray-600">价格从低到高</label>
                      </div>
                      <div class="flex items-center">
                        <input
                          id="sort-2"
                          v-model="sortBy"
                          value="price-desc"
                          type="radio"
                          class="h-4 w-4 border-gray-300 text-gray-900 focus:ring-gray-900"
                        />
                        <label for="sort-2" class="ml-3 text-sm text-gray-600">价格从高到低</label>
                      </div>
                      <div class="flex items-center">
                        <input
                          id="sort-3"
                          v-model="sortBy"
                          value="newest"
                          type="radio"
                          class="h-4 w-4 border-gray-300 text-gray-900 focus:ring-gray-900"
                        />
                        <label for="sort-3" class="ml-3 text-sm text-gray-600">最新上架</label>
                      </div>
                    </div>
                  </fieldset>
                </div>
              </div>
            </div>
          </aside>

          <!-- 产品网格 -->
          <div class="mt-6 lg:col-span-2 lg:mt-0 xl:col-span-3">
            <!-- 产品统计 -->
            <div class="flex items-center justify-between border-b border-gray-200 pb-6">
              <p class="text-sm text-gray-500">共 {{ products.length }} 件商品</p>
            </div>

            <!-- 产品列表 -->
            <div v-if="products.length > 0" class="mt-8 grid grid-cols-1 gap-y-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3 xl:gap-x-8">
              <div v-for="product in products" :key="product.id" class="group relative">
                <div class="relative h-72 w-full overflow-hidden rounded-lg bg-gray-100">
                  <img
                    :src="product.image"
                    :alt="product.name"
                    class="h-full w-full object-cover object-center group-hover:opacity-75 transition-opacity"
                  />
                  <div v-if="product.discount_percentage" class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">
                    -{{ product.discount_percentage }}%
                  </div>
                </div>
                <div class="mt-4 flex items-center justify-between text-base font-medium text-gray-900">
                  <h3>
                    <Link :href="`/products/${product.slug}`" class="hover:text-gray-700">
                      <span aria-hidden="true" class="absolute inset-0" />
                      {{ product.name }}
                    </Link>
                  </h3>
                </div>
                <p class="mt-1 text-sm text-gray-500">{{ product.description }}</p>
                <div class="mt-2 flex items-center space-x-2">
                  <p class="text-lg font-semibold text-gray-900">¥{{ product.price.toLocaleString() }}</p>
                  <p v-if="product.compare_price" class="text-sm text-gray-500 line-through">
                    ¥{{ product.compare_price.toLocaleString() }}
                  </p>
                </div>
              </div>
            </div>

            <!-- 空状态 -->
            <div v-else class="text-center py-12">
              <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
              </svg>
              <h3 class="mt-2 text-sm font-medium text-gray-900">暂无商品</h3>
              <p class="mt-1 text-sm text-gray-500">该分类下还没有商品</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ShopLayout>
</template>

<script setup>
import { Head, Link, router } from '@inertiajs/vue3'
import { ref, watch } from 'vue'
import ShopLayout from '@/Layouts/ShopLayout.vue'

const props = defineProps({
  category: Object,
  products: Array,
  filters: Object
})

// 从后端获取的筛选条件初始化
const priceRange = ref(props.filters?.price_range || 'all')
const sortBy = ref(props.filters?.sort_by || 'default')

// 监听筛选条件变化，触发后端请求
watch([priceRange, sortBy], () => {
  router.get(
    route('category.show', props.category.slug),
    {
      price_range: priceRange.value,
      sort_by: sortBy.value
    },
    {
      preserveState: true,
      preserveScroll: true,
      replace: true
    }
  )
})
</script>

